<!DOCTYPE html>

<!--学院科研工作量-->

<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('表格虚拟滚动')" />
    <style>
        /* 总计行样式 */
        .total-row {
            background-color: #f8f9fa !important;
            font-weight: bold;
        }

        .total-row td {
            border-top: 2px solid #dee2e6 !important;
        }

        /* 总计行合并列的样式 */
        .total-merged-cell {
            position: relative;
            text-align: center !important;
            background-color: #e9ecef !important;
            font-weight: bold !important;
        }

        /* 隐藏总计行的多选框 */
        .total-row .bs-checkbox {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="container-div">
    <div class="btn-group-sm" id="toolbar" role="group">
        &nbsp;&nbsp;<span id="total" class="badge badge-success"></span>
        <a class="btn btn-warning" onclick="$.table.exportExcel()">
            <i class="fa fa-download"></i> 导出
        </a>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
<th:block th:include="include :: bootstrap-table-fixed-columns-js" />
<script>
    var total = 0;
    var prefix = "collegeresearch";
     $(function() {
         var options = {
             url: prefix + "/list",
             exportUrl: prefix + "/export",
             modalName: '学院科研工作量',
             method: "post",
             sidePagination: "server",
             pagination: true,
             showSearch: false,
             showExport: true,
             clickToSelect: true,
             virtualScroll: true,
             undefinedText: 0,//没有数据默认值
             pageSize: 10,
             fixedColumns: true,
             fixedNumber: 3,
             columns: [{
                 checkbox: true,
             },
                 {
                     field: 'partenName',
                     title: '学院名称',
                     align: 'center',
                     class: "fixed-column-1",
                 },
                 {
                     field: 'deptName',
                     title: '专业名称',
                     align: 'center',
                     class: "fixed-column-2",
                 },
                 {
                     field: 'zxktxjys',
                     title: '纵向课题科研项目-校级以上',
                     align: 'center',
                 },
                 {
                     field: 'zxktxj',
                     title: '纵向课题科研项目-校级',
                     align: 'center',
                 },
                 {
                     field: 'hxkt',
                     title: '横向课题科研项目',
                     align: 'center',
                 },
                 {
                     field: 'cgzh',
                     title: '成果转化-积分',
                     align: 'center',

                 },
                 {
                     field: 'xslw',
                     title: '学术论文',
                     align: 'center',

                 },
                 {
                     field: 'jczz',
                     title: '教材专著',
                     align: 'center',

                 },
                 {
                     field: 'zlrz',
                     title: '专利、软著',
                     align: 'center',

                 },
                 {
                     field: 'jl',
                     title: '奖励',
                     align: 'center',
                 },
                 {
                     field: 'jzbg',
                     title: '讲座报告',
                     align: 'center',
                 },
             ]
         }
         $.table.init(options);

        // 添加表格加载完成后的回调函数
         $('#bootstrap-table').on('load-success.bs.table', function () {
             const $table = $(this);
             const $tbody = $table.find('tbody');

             // 使用延时确保DOM完全渲染
             setTimeout(function() {
                 // 查找总计行（userName为"总计"的行）
                 $tbody.find('tr').each(function() {
                     const $row = $(this);
                     const $cells = $row.find('td');

                     // 检查第三列（教师列）是否为"总计"
                     if ($cells.length > 2 && $cells.eq(2).text().trim() === '总计') {
                         processTotalRow($row, $cells);
                     }
                 });
             }, 200);
         });

         // 处理总计行的函数
         function processTotalRow($row, $cells) {
             // 1. 为整行添加总计样式
             $row.addClass('total-row');

             // 2. 处理第二、三列的合并（教研室和教师列）
             const $deptCell = $cells.eq(1);    // 教研室列
             const $teacherCell = $cells.eq(2); // 教师列

             // 3. 设置合并后的样式和内容
             $deptCell.addClass('total-merged-cell')
                 .attr('colspan', '2')
                 .text('总计');

             // 4. 隐藏第三列
             $teacherCell.hide();

             // 5. 确保多选框被隐藏
             $cells.eq(0).addClass('bs-checkbox');
         }
     });

</script>
</body>

</html>